<template>
  <view class="purchase tn-safe-area-inset-bottom">
    <!-- <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false" :is-back="false">抢购活动</tn-navbar> -->

    <view class="purchase-swiper">
      <!-- 轮播 -->
      <tn-swiper :data="swiperData" indicator-mode="round" height="355" radius="0" @click="swiperClick"></tn-swiper>
    </view>

    <!-- <view class="purchase-notice">
      <tn-notice-bar
        :data="noticeData"
        left-icon="notice"
        duration="1000"
        mode="vertical"
        @click="noticeClick"
      ></tn-notice-bar>
    </view> -->
    <view v-if="isSign">
      <view class="purchase-list">
        <view class="purchase-list-title">
          <p>今日抢购</p>
        </view>
        <view class="purchase-list-content">
          <view class="item" v-for="(purchase, index) in todayPurchaseData" @click="handleClick(purchase.id)">
            <view class="item-text item-title">—— {{ purchase.activityName }} ——</view>
            <view class="item-text item-time">开抢时间: {{ purchase.showStartTime }} -
              {{ purchase.showEndTime }}</view>
            <view class="item-text item-status">{{ purchase.status }}</view>
          </view>
          <view class="no-purchase" v-if="todayPurchaseData.length === 0">
            今日无活动
          </view>
        </view>
      </view>

      <view class="purchase-list">
        <view class="purchase-list-title">
          <p>抢购预告</p>
        </view>
        <view class="purchase-list-content"><!-- @click="handleClick(purchase.id)"-->
          <view class="item" v-for="(purchase, index) in nextPurchaseData" >
            <view class="item-text item-title">—— {{ purchase.activityName }} ——</view>
            <view class="item-text item-time">日期: {{ purchase.date }}</view>
            <view class="item-text item-time">时间: {{ purchase.showStartTime }} -
              {{ purchase.showEndTime }}</view>
            <!-- <view class="item-text item-status">{{ purchase.status }}</view> -->
          </view>
          <view class="no-purchase" v-if="nextPurchaseData.length === 0">
            无
          </view>
        </view>
      </view>
    </view>
    <view class="no-sign" v-else>
      请先阅读协议，并签名<br /><br />
      <tn-button class="item-button" border bgColor="tn-bg-main" @click="toSign()">阅读协议</tn-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnSwiper from "@/tuniao-ui/components/tn-swiper/src/Swiper.vue";
import TnButton from "@/tuniao-ui/components/tn-button/src/Button.vue";
import { SwiperData } from "@/tuniao-ui/types";
import { getToDay, getNext, getIsSign } from "@/api/purchase";
import { formatTo, formatToDate } from "@/utils/dateUtil";
import { navPage } from "@/tuniao-ui/utils";
import { useUserStore } from "@/tuniao-ui/store/user";
import swiper1Url from "@/static/images/demo/swiper/1.jpeg";
import swiper2Url from "@/static/images/demo/swiper/2.jpeg";
import { navLogin, navBack } from "@/tuniao-ui/utils";
import { toast } from "@/tuniao-ui/utils/messageUtils";
import { ResultEnum } from "@/enums/httpEnum";
import { findAddressNum } from "@/api/address";
import { findPaymentByMemberId } from "@/api/payment";

const userStore = useUserStore();
const isLogin = ref<boolean>(false);
const isSign = ref<boolean>(false);

// 活动数据接口
interface PurchaseVO {
  id: number;
  activityId: string;
  activityName: string;
  startTime: number;
  endTime: number;
  showStartTime: string; // 转换后
  showEndTime: string; // 转换后
  date: string;
  status: string;
}
// 轮播图数据
const swiperData: SwiperData[] = [{ image: swiper1Url }, { image: swiper2Url }];
// 通知信息
const noticeData: string[] = ["用户协议", "隐私政策", "用户须知"];
// 今日活动数据
const todayPurchaseData = ref<PurchaseVO[]>([]);
// 预告活动数据
const nextPurchaseData = ref<PurchaseVO[]>([]);

function swiperClick(index: any) {
  console.log(index);
}
function noticeClick(index: any) {
  console.log(index);
}

/**
 * 跳转活动列表页 单击事件
 * @param id
 */
const handleClick = async (id: number) => {
  let memberId = userStore.getId


  let response = await findPaymentByMemberId({ memberId: memberId });

  if (response.code === ResultEnum.SUCCESS) {
    let result = response.result;
    if (!(result.accountName && result.accountNumber)) {
      toast({ title: '请添加银行卡后，再参与抢购' });
      navPage("/pages/mine/payment/payment");
      return;
    }
  }

  let { code, result } = await findAddressNum({ memberId: memberId });

  if (code === ResultEnum.SUCCESS) {
    if (result > 0) {
      navPage("/pages/purchase/purchaseDetail?purchaseId=" + id);
    } else {
      toast({ title: '请添加收货地址后，再参与抢购' });
      navPage("/pages/mine/address/addAddress");
      return;
    }
  }

};

function toSign() {
  navPage("/pages/purchase/sign");
}

/**
 * 格式化抢购数据
 * @param value
 */
function formatPurchase(value: PurchaseVO) {
  value.showStartTime = formatTo(value.startTime * 1000, "HH:mm");
  value.showEndTime = formatTo(value.endTime * 1000, "HH:mm");
  value.date = formatToDate(value.startTime * 1000);
  let time = new Date().getTime() / 1000;
  value.status = "未开始";
  if (value.startTime < time) {
    value.status = "抢购中";
    if (value.endTime < time) {
      value.status = "已结束";
    }
  }
  return value;
}

onMounted(async () => {
  isLogin.value = userStore.isLogin();
  if (isLogin.value) {

    const { code, result } = await getIsSign();
    if (code === ResultEnum.SUCCESS) {
      isSign.value = result;
    }

    // 获取今日活动
    getToDay().then((res) => {
      let list: PurchaseVO[] = res.result;
      list.forEach((value) => {
        value = formatPurchase(value);
      });

      todayPurchaseData.value = list;
    });

    // 获取活动预告
    getNext().then((res) => {
      let list: PurchaseVO[] = res.result;
      list.forEach((value) => {
        value = formatPurchase(value);
      });

      nextPurchaseData.value = list;
    });


  } else {
    navLogin();
  }

});
</script>

<style lang="scss" scoped>
.purchase {
  margin-bottom: 200rpx;

  .no-sign {
    text-align: center;
    margin-top: 50rpx;
  }

  &-swiper {
    width: 100%;
    height: 355rpx;
  }

  &-notice {
    margin: 50rpx 0;
  }

  &-list {
    &-title {
      font-size: 40rpx;
      text-align: center;
      font-weight: bold;
      margin: 20rpx 0;
    }

    &-content {
      padding: 20rpx;
      background-color: #ffecc2;
      border-radius: 15rpx;

      .no-purchase {
        font-size: 30rpx;
        text-align: center;
      }

      .item {
        margin: 30rpx 0;
        background-color: #f9e9cf;
        text-align: center;
        height: 250rpx;
        display: grid;
        border-radius: 15rpx;
        border: 1px solid #fbd495;

        &-time {
          font-size: 30rpx;
          font-weight: bold;
        }

        &-text {
          align-self: center;
          justify-content: center;
          width: 100%;
          line-height: 55rpx;
        }
      }
    }
  }
}
</style>
